<template>
  <div class="td-patient-delection">
    <mt-cell title="姓名">
      <span>{{user.UserName}}</span>
    </mt-cell>
    <mt-cell title="手机号">
      <span>{{user.MobilePhone}}</span>
    </mt-cell>
    <mt-cell title="身份证">
      <span>{{user.IDCard}}</span>
    </mt-cell>
    <mt-cell title="配偶姓名">
      <span v-if="user.MateName">{{user.MateName}}</span>
      <span v-if="!user.MateName">未录入</span>
    </mt-cell>
    <mt-cell title="配偶年龄">
      <span v-if="user.MateBirthDay">{{user.MateAge}}</span>
      <span v-if="!user.MateBirthDay">未录入</span>
    </mt-cell>

    <mt-cell title="采样医院" is-link @click.native="showHospital=true">
      <span v-if="!HospitalID">请选择</span>
      <span v-if="HospitalID">{{hospitalList.find(i=>i.value===HospitalID).label}}</span>
    </mt-cell>

    <mt-cell title="主治医生" is-link @click.native="showDoctor=true">
      <span v-if="!DoctorID">请选择</span>
      <span v-if="DoctorID">{{doctorList.find(i=>i.value===DoctorID).label}}</span>
    </mt-cell>

    <el-alert
      v-if="HospitalID==='-2'"
      title="备注：自行寻找采血医院，须选择物料邮寄地址"
      type="warning"
      :closable="false"
    ></el-alert>

    <mt-cell
      v-if="HospitalID==='-2'"
      title="寄送地址"
      :label="AddressID?addressList.find(i=>i.value===AddressID).label:''"
      is-link
      @click.native="showAddress=true"
    >
      <span v-if="!AddressID">请选择</span>
    </mt-cell>

    <div class="btnSubmit">
      <el-button
        type="primary"
        class="td-btn-patient-primary"
        style="width:80%;"
        @click="btnNext();"
        round
      >下一步</el-button>
    </div>

    <mt-popup v-model="showAddress" position="bottom" class="mint-popup-box">
      <mt-header title="寄送地址">
        <mt-button slot="left" @click.native="addAddress()">添加</mt-button>
        <mt-button slot="right" @click.native="showAddress=false">关闭</mt-button>
      </mt-header>
      <div class="list-box address-list">
        <mt-radio :options="addressList" @change="getAddress" v-model="AddressID"></mt-radio>
      </div>
    </mt-popup>

    <mt-popup v-model="showHospital" position="bottom" class="mint-popup-box">
      <mt-header title="采样医院">
        <mt-button slot="right" @click.native="showHospital=false">关闭</mt-button>
      </mt-header>
      <div class="list-box">
        <mt-radio :options="hospitalList" @change="getHospital" v-model="HospitalID"></mt-radio>
      </div>
    </mt-popup>

    <mt-popup v-model="showDoctor" position="bottom" class="mint-popup-box">
      <mt-header title="主治医生">
        <mt-button slot="right" @click.native="showDoctor=false">关闭</mt-button>
      </mt-header>
      <div class="list-box">
        <mt-radio :options="doctorList" @change="getDoctor" v-model="DoctorID"></mt-radio>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import hospitalService from "../../../_services/hospital.service";
import doctorService from "../../../_services/doctor.service";
import UserAddressService from "../../../_services/userAddress.service";
import { mapActions } from "vuex";
export default {
  name: "TianDingPatientDelectionComponent",
  data() {
    return {
      user: {},
      showHospital: false,
      hospitalList: [],
      HospitalID: "",
      showDoctor: false,
      doctorList: [],
      DoctorID: "",
      showAddress: false,
      addressList: [],
      AddressID: "",
      IsDefault: "1"
    };
  },
  mounted() {
    this.user = this.utils$.dataFormat(
      JSON.parse(this.local$.getItem("tdUser"))
    );
    this.getHospitalList();
    this.getDoctorInfolList();
    this.getUserAddressList();
  },
  methods: {
    getHospitalList() {
      this.hospitalList = [];
      this.hospitalList.push({
        value: "-2",
        label: "自行选择采血医院",
        OtherCost: 0
      });
      let hospitalParams = {};
      hospitalParams.PageIndex = 1;
      hospitalParams.PageSize = 100;
      hospitalParams.Orderby = "HospitalID";
      hospitalParams.IsDesc = true;
      hospitalService.getHospitalList(hospitalParams).then(response => {
        if (response && response.Data.Items.length > 0) {
          response.Data.Items.forEach(element => {
            let item = {
              value: element.HospitalID.toString(),
              label: element.HospitalName,
              OtherCost: element.OtherCost
            };
            this.hospitalList.push(item);
          });
        }
      });
    },
    getDoctorInfolList() {
      this.doctorList = [];
      let params = {};
      params.pageIndex = 1;
      params.pageSize = 100;
      params.orderby = "DoctorID";
      params.IsDesc = true;

      doctorService.getDoctorInfolList(params).then(response => {
        if (response && response.Data && response.Data.Items.length > 0) {
          response.Data.Items.forEach(element => {
            if (element.AuditStatus === 2 && element.UserStatus === 0) {
              let item = {
                value: element.DoctorID.toString(),
                label: element.DoctorName
              };
              this.doctorList.push(item);
            }
          });
        }
      });
    },
    getUserAddressList() {
      this.addressList = [];
      let args = {
        UserID: this.user.UserID,
        PageIndex: 1,
        PageSize: 100,
        Orderby: "AddressID",
        IsDesc: true
      };
      UserAddressService.getUserAddressList(args).then(response => {
        if (response && response.Data && response.Data.Items.length > 0) {
          response.Data.Items.forEach(element => {
            let item = {
              value: element.AddressID.toString(),
              label: `${element.ProviceName}${element.CityName}${
                element.AreaName
              }${element.StreetDetail}`
            };
            this.addressList.push(item);
          });
        }
      });
    },
    getAddress(event) {
      this.showAddress = false;
    },
    getHospital(event) {
      this.showHospital = false;
    },
    getDoctor(event) {
      this.showDoctor = false;
    },
    addAddress() {
      this.$router.push({
        name: "tdAddressModify",
        params: { type: 1 }
      });
    },
    getDefault(event) {},
    btnNext() {
      if (!this.utils$.isEmpty(this.HospitalID)) {
        this.toast$(`请选择采样医院`);
        return;
      }

      if (!this.utils$.isEmpty(this.DoctorID)) {
        this.toast$(`请选择主治医生`);
        return;
      }

      if (this.HospitalID === "-2" && !this.utils$.isEmpty(this.AddressID)) {
        this.toast$(`请选择寄送地址`);
        return;
      }

      let params = {
        OrderID: 0,
        UserID: this.user.UserID,
        HospitalID: parseInt(this.HospitalID),
        HospitalName: this.hospitalList.find(i => i.value === this.HospitalID)
          .label,
        OtherCost: this.hospitalList.find(i => i.value === this.HospitalID)
          .OtherCost,
        DoctorID: parseInt(this.DoctorID),
        DoctorName: this.doctorList.find(i => i.value === this.DoctorID).label,
        IsSendMaterials: this.HospitalID === "-2" ? 1 : 0,
        TotalFee: 0,
        AddressID: -1,
        Address: "",
        ItemIds: [],
        PayPlatform: 0,
        PayType: 0
      };

      if (this.HospitalID === "-2") {
        params.AddressID = parseInt(this.AddressID);
        params.Address = this.addressList.find(
          i => i.value === this.AddressID
        ).label;
      }

      this.resetAction();
      this.orderInfoAction(params);

      this.$router.push({ name: "tdPatientDelectionSelectTestItem" });
    },
    ...mapActions(["orderInfoAction", "resetAction"])
  }
};
</script>
